<template>
  <!--<el-col :span="24">-->
    <!--<el-row type="flex" justify="right">-->
      <!--<el-col :span="5" :offset="2">-->
      <!--</el-col>-->
      <!--<el-col :span="5">-->
        <!--<div class="div">-->
          <!--&lt;!&ndash;盐城APP后台管理系统&ndash;&gt;-->
          <!--雄关便民卡运营平台-->
        <!--</div>-->
      <!--</el-col>-->
    <!--</el-row>-->
    <!--<div>-->
      <!--<hr/>-->
    <!--</div>-->
    <!--<el-row type="flex" class="row">-->
      <!--<el-col :span="7" :offset="4">-->
        <!--<div class="d">-->
          <!--本系统可以在Firefox、Chrome浏览器中运行-->
        <!--</div>-->
      <!--</el-col>-->
      <!--<el-col :span="7" :offset="1">-->
        <!--<div class="page-container">-->
          <!--<el-form :model="ruleForm" label-position="left" label-width="0px"-->
                   <!--class="demo-ruleForm login-container" :rules="rules" ref="ruleForm">-->
            <!--<h3 class="title">用户登录</h3>-->
            <!--<div class="dii">-->
              <!--<el-form-item prop="username">-->
                <!--<el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="用户名"-->
                          <!--@keyup.enter.native="submitForm('ruleForm')" clearable></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item prop="password">-->
                <!--<el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"-->
                          <!--@keyup.enter.native="submitForm('ruleForm')" clearable></el-input>-->
              <!--</el-form-item>-->
              <!--<el-form-item id="code" prop="code">-->
                <!--<el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="验证码"-->
                          <!--style="width: 50%;float: left" @keyup.enter.native="submitForm('ruleForm')" clearable></el-input>-->
                <!--<img id="img" @click="refresh">-->
              <!--</el-form-item>-->
              <!--<el-form-item style="width:100%;">-->
                <!--<el-button-group style="width: 100%">-->
                  <!--<el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')" :loading="loading">登录-->
                  <!--</el-button>-->
                <!--</el-button-group>-->
              <!--</el-form-item>-->
            <!--</div>-->
          <!--</el-form>-->
        <!--</div>-->
      <!--</el-col>-->
    <!--</el-row>-->
  <!--</el-col>-->
  <!--<div class="login">-->
    <el-form :model="ruleForm" label-position="left" label-width="0px"
    class="demo-ruleForm login-container" :rules="rules" ref="ruleForm">
    <h3 class="title">雄关便民卡运营平台</h3>
    <div class="dii">
    <el-form-item prop="username">
    <el-input type="text" v-model="ruleForm.username" auto-complete="off" placeholder="用户名"
    @keyup.enter.native="submitForm('ruleForm')" clearable></el-input>
    </el-form-item>
    <el-form-item prop="password">
    <el-input type="password" v-model="ruleForm.password" auto-complete="off" placeholder="密码"
    @keyup.enter.native="submitForm('ruleForm')" clearable></el-input>
    </el-form-item>
    <el-form-item id="code" prop="code">
    <el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="验证码"
    style="width: 50%;float: left" @keyup.enter.native="submitForm('ruleForm')" clearable></el-input>
    <img id="img" @click="refresh" class="img">
    </el-form-item>
    <el-form-item style="width:100%;">
    <el-button-group style="width: 100%">
    <el-button type="primary" style="width: 100%" @click="submitForm('ruleForm')" :loading="loading">登录
    </el-button>
    </el-button-group>
    </el-form-item>
    </div>
    </el-form>
  <!--</div>-->
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'Login',
    data () {
      return {
        ruleForm: {
          username: '',
          password: '',
          code: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ]
        },
        loading: false,
        codes: false
      }
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.check()
          }
        })
      },
      refresh () {
        window.document.getElementById('img').src = `${this.BASE_URL}/user/getCode?number=` + Math.random()
      },
      check () {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/user/checkCode`,
          responseType: 'json',
          params: {
            code: this.ruleForm.code
          }
        }).then((response) => {
          if (response.data.data === '0') {
            axios({
              method: 'get',
              url: `${this.BASE_URL}/user/vali`,
              responseType: 'json',
              params: {
                username: this.ruleForm.username,
                password: this.ruleForm.password
              }
            }).then((response) => {
              if (response.data.statuCode === '0') {
                sessionStorage.setItem('username', response.data.data)
                this.$store.commit('updateLoginStatus', {isLogin: true})
                this.$store.commit('updateUsername', {username: response.data.data})
                this.$router.push({path: '/home'})
                this.loading = false
              } else if (response.data.statuCode === '1') {
                this.loading = false
                this.$alert('密码或用户名错误', '提示', {
                  confirmButtonText: '确定'
                })
                this.ruleForm.password = ''
                this.refresh()
              } else {
                this.loading = false
                this.$alert('该账户已失效', '提示', {
                  confirmButtonText: '确定'
                })
                this.refresh()
              }
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.$message.error('验证码错误')
            this.refresh()
          }
        }).catch(() => {
          this.loading = false
        })
      }
    },
    mounted () {
      window.document.getElementById('img').src = `${this.BASE_URL}/user/getCode?number=` + Math.random()
    }
  }
</script>

<style scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    /*margin: 180px auto;*/
    padding: 35px 35px 15px 35px;
    /*background: #00d1b2;*/
    border: 1px solid #eaeaea;
    box-shadow: 0 0 80px #CCCCCC;
    width: 385px;
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    background-color: #fff;
    display: inline-block;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #1b6d85;
    font-size: 19pt;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }

  .el-form-item__content {
    width: 100%;
  }

  .el-input, .el-input__inner {
    width: 100%;
  }

  .di {
    direction: inherit;
  }

  .dii {
    /*margin-left: -34px;*/
  }

  .div {
    font-weight: bold;
    font-size: 18px;
  }

  .dd {
    margin-top: 4%;
  }

  .row {
    margin-top: 50px;
  }

  .d {
    font-size: 15pt;
    font-weight: bold;
  }
  .img{
    width: 125px;
    height: 35px;
  }
</style>
